
<!DOCTYPE HTML>
<html>
 <head>
    <title>WEB表单设计器 Ueditor Formdesign Plugins -leipi.org</title>
        <meta name="keyword" content="ueditor插件,web表单设计器,表单设计器,php表单设计器,formbuilder">
        <meta name="description" content="百度Ueditor表单设计器扩展插件，开源免费表单设计器，它通常在、OA系统、问卷调查系统、考试系统、等领域发挥着重要作用，你可以在此基础上任意修改使功能无限强大！">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="author" content="leipi.org">
    <link href="bootstrap/bootstrap.css" rel="stylesheet" type="text/css" />
    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="/Public/css/bootstrap/css/bootstrap-ie6.css?2028">
    <![endif]-->
    <!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="/Public/css/bootstrap/css/ie.css?2028">
    <![endif]-->
    <link href="css/site.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        var _root='http://formdesign.leipi.org/',_controller = 'index';
    </script>
    
 </head>
<body>
<!-- fixed navbar -->
<!-- Docs page layout -->
<div class="container">
<form method="post" id="saveform" name="saveform" action="index/parse.html" target="_blank">
<!--预览也要用 用来解析表单-->
<input type="hidden" name="fields" id="fields" value="0">
<!--要提交到服务器的-->
<input type="hidden" name="type" id="leipi_type" value="save">
<input type="hidden" name="formid" id="leipi_formid" value="1">
<textarea  name="parse_form" id="leipi_parse_form" style="display:none;"></textarea>

<div class="row">
    <div class="well well-small">
       <a>动态表单Ueditor</a>
     </div> 
</div>

<div class="row">
<div class="span2">
      <li class="nav-header">组件菜单</li>
<ul class="nav nav-list">  <!--leipiFormDesign.addcolumn(2)  -->
    <li><a href="javascript:void(0);" onclick="insertHtml(1);" class="btn btn-link">一行一列</a></li>
    <li><a href="javascript:void(0);" onclick="insertHtml(2);" class="btn btn-link">一行两列</a></li>
    <li><a href="javascript:void(0);" onclick="insertHtml(3);" class="btn btn-link">一行三列</a></li>
    <li><a href="javascript:void(0);" onclick="my_subject('me');" class="btn btn-link">增加我方主体</a></li>
    <li><a href="javascript:void(0);" onclick="my_subject('you');;" class="btn btn-link">增加对方主体</a></li>
    <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('text');" class="btn btn-link">文本框</a></li>
    <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('textarea');" class="btn btn-link">多行文本</a></li>
    <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('select');" class="btn btn-link">下拉菜单</a></li>
    <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('radios');" class="btn btn-link">单选框</a></li>
    <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('checkboxs');" class="btn btn-link">复选框</a></li>
    <li style="display:none;"><a href="javascript:void(0);" onclick="leipiFormDesign.exec('macros');" class="btn btn-link">宏控件</a></li>
    <li style="display:none;"><a href="javascript:void(0);" onclick="leipiFormDesign.exec('progressbar');" class="btn btn-link">进度条</a></li>
    <li style="display:none;"><a href="javascript:void(0);" onclick="leipiFormDesign.exec('qrcode');" class="btn btn-link">二维码</a></li>
    <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('listctrl');" class="btn btn-link">列表控件</a></li>
    <li style="display:none;"><a href="javascript:void(0);" onclick="leipiFormDesign.exec('more');" class="btn btn-link">一起参与...</a></li>
    <li style="display:none;"><a href="javascript:void(0);" onclick="leipiFormDesign.exec('custom');" class="btn btn-link">自定义</a></li>
    <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('button');" class="btn btn-link">按钮</a></li>
	<li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('date_');" class="btn btn-link">日期控件</a></li>
	<li><a href="javascript:void(0);" onclick="insertHtml_people();" class="btn btn-link">选人组件</a></li>
	<li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('upload_download');" class="btn btn-link">上传、下载组件</a></li>
	<li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('print');" class="btn btn-link">打印组件</a></li>
	<li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('business');" class="btn btn-link">关联业务数据组件</a></li>
	</ul>

</div>

<div class="span10">


<script id="myFormDesign" type="text/plain" style="width:100%;">

</script>


</div>
</div><!--end row-->
</form>

<form id="edForm" style="display:none;">
<input type="hidden" name="content" class="edContent">
</form>
</div><!--end container-->
<script type="text/javascript" charset="utf-8" src="js/jquery-1.11.2.min.js?2028"></script>
<!-- 气泡
<script type="text/javascript" charset="utf-8" src="/Public/js/grumble/js/jquery.grumble.min.js?2028"></script>
 -->
<script type="text/javascript" charset="utf-8" src="ueditor.config.js?2028"></script>
<script type="text/javascript" charset="utf-8" src="ueditor.all.js?2028"> </script>
<script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js?2028"></script>
<script type="text/javascript" charset="utf-8" src="js/formdesign.v4.js?2028"></script>
<!-- script start-->  
<script type="text/javascript">
var leipiEditor = UE.getEditor('myFormDesign',{
            //allowDivTransToP: false,//阻止转换div 为p
            toolleipi:true,//是否显示，设计器的 toolbars
            textarea: 'design_content',   
            //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
           toolbars:[[
            'fullscreen', 'source', '|', 'undo', 'redo', '|','bold', 'italic', 'underline', 'fontborder', 'strikethrough',  'removeformat', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist','|', 'fontfamily', 'fontsize', '|', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',  'link', 'unlink',  '|',  'horizontal',  'spechars',  'wordimage', '|', 'inserttable', 'deletetable',  'mergecells',  'splittocells']],
            //focus时自动清空初始化时的内容
            //autoClearinitialContent:true,
            //关闭字数统计
            wordCount:false,
            //关闭elementPath
            elementPathEnabled:false,
            //默认的编辑区域高度
            initialFrameHeight:500
            //,iframeCssUrl:"/Public/css/bootstrap/css/bootstrap.css" //引入自身 css使编辑器兼容你网站css
            //更多其他参数，请参考ueditor.config.js中的配置项
        });

 var leipiFormDesign = {
    /*执行控件*/
    exec : function (method) {
        leipiEditor.execCommand(method);
    },
   setContent:function(isAppendTo){
	   
	  alert(isAppendTo);
	  UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
      UE.getEditor('editor').setContent('<input class="g_input" style="width:200px;border:1px solid red;"/>', isAppendTo);
    	
    },
    /*
        Javascript 解析表单
        template 表单设计器里的Html内容
        fields 字段总数
    */
    
    parse_form:function(template,fields)
    {
    	alert(555);
        //正则  radios|checkboxs|select 匹配的边界 |--|  因为当使用 {} 时js报错
        var preg =  /(\|-<span(((?!<span).)*leipiplugins=\"(radios|checkboxs|select)\".*?)>(.*?)<\/span>-\||<(img|input|textarea|select).*?(<\/select>|<\/textarea>|\/>))/gi,preg_attr =/(\w+)=\"(.?|.+?)\"/gi,preg_group =/<input.*?\/>/gi;
        if(!fields) fields = 0;

        var template_parse = template,template_data = new Array(),add_fields=new Object(),checkboxs=0;

        var pno = 0;
        template.replace(preg, function(plugin,p1,p2,p3,p4,p5,p6){
            var parse_attr = new Array(),attr_arr_all = new Object(),name = '', select_dot = '' , is_new=false;
            var p0 = plugin;
            var tag = p6 ? p6 : p4;
            //alert(tag + " \n- t1 - "+p1 +" \n-2- " +p2+" \n-3- " +p3+" \n-4- " +p4+" \n-5- " +p5+" \n-6- " +p6);

            if(tag == 'radios' || tag == 'checkboxs')
            {
                plugin = p2;
            }else if(tag == 'select')
            {
                plugin = plugin.replace('|-','');
                plugin = plugin.replace('-|','');
            }
            plugin.replace(preg_attr, function(str0,attr,val) {
                    if(attr=='name')
                    {
                        if(val=='leipiNewField')
                        {
                            is_new=true;
                            fields++;
                            val = 'data_'+fields;
                        }
                        name = val;
                    }
                    
                    if(tag=='select' && attr=='value')
                    {
                        if(!attr_arr_all[attr]) attr_arr_all[attr] = '';
                        attr_arr_all[attr] += select_dot + val;
                        select_dot = ',';
                    }else
                    {
                        attr_arr_all[attr] = val;
                    }
                    var oField = new Object();
                    oField[attr] = val;
                    parse_attr.push(oField);
            }) 
            /*alert(JSON.stringify(parse_attr));return;*/
             if(tag =='checkboxs') /*复选组  多个字段 */
             {
                plugin = p0;
                plugin = plugin.replace('|-','');
                plugin = plugin.replace('-|','');
                var name = 'checkboxs_'+checkboxs;
                attr_arr_all['parse_name'] = name;
                attr_arr_all['name'] = '';
                attr_arr_all['value'] = '';
                
                attr_arr_all['content'] = '<span leipiplugins="checkboxs"  title="'+attr_arr_all['title']+'">';
                var dot_name ='', dot_value = '';
                p5.replace(preg_group, function(parse_group) {
                    var is_new=false,option = new Object();
                    parse_group.replace(preg_attr, function(str0,k,val) {
                        if(k=='name')
                        {
                            if(val=='leipiNewField')
                            {
                                is_new=true;
                                fields++;
                                val = 'data_'+fields;
                            }

                            attr_arr_all['name'] += dot_name + val;
                            dot_name = ',';

                        }
                        else if(k=='value')
                        {
                            attr_arr_all['value'] += dot_value + val;
                            dot_value = ',';

                        }
                        option[k] = val;    
                    });
                    
                    if(!attr_arr_all['options']) attr_arr_all['options'] = new Array();
                    attr_arr_all['options'].push(option);
					
                    //if(!option['checked']) option['checked'] = '';
                    var checked = option['checked'] !=undefined ? 'checked="checked"' : '';
                    attr_arr_all['content'] +='<input type="checkbox" name="'+option['name']+'" value="'+option['value']+'"  '+checked+'/>'+option['value']+'&nbsp;';

                    if(is_new)
                    {
                        var arr = new Object();
                        arr['name'] = option['name'];
                        arr['leipiplugins'] = attr_arr_all['leipiplugins'];
                        add_fields[option['name']] = arr;

                    }

                });
                attr_arr_all['content'] += '</span>';

                //parse
                template = template.replace(plugin,attr_arr_all['content']);
                template_parse = template_parse.replace(plugin,'{'+name+'}');
                template_parse = template_parse.replace('{|-','');
                template_parse = template_parse.replace('-|}','');
                template_data[pno] = attr_arr_all;
                checkboxs++;

             }else if(name)
            {
                if(tag =='radios') /*单选组  一个字段*/
                {
                    plugin = p0;
                    plugin = plugin.replace('|-','');
                    plugin = plugin.replace('-|','');
                    attr_arr_all['value'] = '';
                    attr_arr_all['content'] = '<span leipiplugins="radios" name="'+attr_arr_all['name']+'" title="'+attr_arr_all['title']+'">';
                    var dot='';
                    p5.replace(preg_group, function(parse_group) {
                        var option = new Object();
                        parse_group.replace(preg_attr, function(str0,k,val) {
                            if(k=='value')
                            {
                                attr_arr_all['value'] += dot + val;
                                dot = ',';
                            }
                            option[k] = val;    
                        });
                        option['name'] = attr_arr_all['name'];
                        if(!attr_arr_all['options']) attr_arr_all['options'] = new Array();
                        attr_arr_all['options'].push(option);
                        //if(!option['checked']) option['checked'] = '';
                        var checked = option['checked'] !=undefined ? 'checked="checked"' : '';
                        attr_arr_all['content'] +='<input type="radio" name="'+attr_arr_all['name']+'" value="'+option['value']+'"  '+checked+'/>'+option['value']+'&nbsp;';

                    });
                    attr_arr_all['content'] += '</span>';

                }else
                {
                    attr_arr_all['content'] = is_new ? plugin.replace(/leipiNewField/,name) : plugin;
                }
                //attr_arr_all['itemid'] = fields;
                //attr_arr_all['tag'] = tag;
                template = template.replace(plugin,attr_arr_all['content']);
                template_parse = template_parse.replace(plugin,'{'+name+'}');
                template_parse = template_parse.replace('{|-','');
                template_parse = template_parse.replace('-|}','');
                if(is_new)
                {
                    var arr = new Object();
                    arr['name'] = name;
                    arr['leipiplugins'] = attr_arr_all['leipiplugins'];
                    add_fields[arr['name']] = arr;
                }
                template_data[pno] = attr_arr_all;

               
            }
            pno++;
        })
         console.log(add_fields);
        var parse_form = new Object({
            'fields':fields,//总字段数
            'template':template,//完整html
            'parse':template_parse,//控件替换为{data_1}的html
            'data':template_data,//控件属性
            'add_fields':add_fields//新增控件
        });
        return JSON.stringify(parse_form);
    },
    /*type  =  save 保存设计 versions 保存版本  close关闭 */
    fnCheckForm : function ( type ) {
        if(leipiEditor.queryCommandState( 'source' ))
            leipiEditor.execCommand('source');//切换到编辑模式才提交，否则有bug
            
        if(leipiEditor.hasContents()){
            leipiEditor.sync();/*同步内容*/
            
           // alert("你点击了保存,这里可以异步提交....");
            //return false;
            var type_value='',formid=0,fields=$("#fields").val(),formeditor='';

            if( typeof type!=='undefined' ){
                type_value = type;
            }
            //获取表单设计器里的内容
            formeditor=leipiEditor.getContent();
            //alert(formeditor);
            //解析表单设计器控件
            var parse_form = this.parse_form(formeditor,fields);
            //alert(parse_form);
            
            
            $("#leipi_type").val(type_value);
            $("#leipi_parse_form").val(parse_form);
            
            $("#saveform").attr("target","_blank");
            $("#saveform").attr("action","index/parse.html");
            $("#saveform").submit();

             /*//异步提交数据
             $.ajax({
                type: 'POST',
                url : '/index/parse.html',
                //dataType : 'json',
                data : {'type' : type_value,'formid':formid,'parse_form':parse_form},
                success : function(data){
                    if(confirm('查看js解析后，提交到服务器的数据，请临时允许弹窗'))
                    {
                        win_parse=window.open('','','width=800,height=600');
                        //这里临时查看，所以替换一下，实际情况下不需要替换  
                        data  = data.replace(/<\/+textarea/,'&lt;textarea');
                        win_parse.document.write('<textarea style="width:100%;height:100%">'+data+'</textarea>');
                        win_parse.focus();
                    }
                    
                    /*
                  if(data.success==1){
                      alert('保存成功');
                      $('#submitbtn').button('reset');
                  }else{
                      alert('保存失败！');
                  }* /
                }
            });*/
            
        } else {
            alert('表单内容不能为空！')
            $('#submitbtn').button('reset');
            return false;
        }
    } ,
    /*预览表单*/
    fnReview : function (){
        if(leipiEditor.queryCommandState( 'source' ))
            leipiEditor.execCommand('source');/*切换到编辑模式才提交，否则部分浏览器有bug*/
            
        if(leipiEditor.hasContents()){
            leipiEditor.sync();       /*同步内容*/
            //获取表单设计器里的内容
            formeditor=leipiEditor.getContent();
            //alert(formeditor);
            /*设计form的target 然后提交至一个新的窗口进行预览*/
            //var json = leipiFormDesign.parse_form(formeditor,0);
            //console.log("============================");
            //console.log(json);
            //return ; 
            document.saveform.target="mywin";
            //var url="index/preview.html?html="+formeditor;
            var url="index/preview.html?html="+encodeURI(formeditor);
            //window.open('','mywin',"menubar=0,toolbar=0,status=0,resizable=1,left=0,top=0,scrollbars=1,width=" +(screen.availWidth-10) + ",height=" + (screen.availHeight-50) + "\"");
              //window.open(url,"mywin","menubar=0,toolbar=0,status=0,resizable=1,left=0,top=0,scrollbars=1,width=" +(screen.availWidth-10) + ",height=" + (screen.availHeight-50) + "\"");
			//$.post("/make/ueditor",{"content": encodeURI(formeditor)});
			//$(".edContent").val(encodeURI(formeditor));//转码
			$(".edContent").val(formeditor);
			$("#edForm").attr({"method":"post","target":"_blank", "action": "/law-core/make/ueditor"}).submit();
			//$("#edForm").attr({"method":"post", "action": "/law/make/ueditor"}).submit();
			
            //解析表单设计器控件
            //var parse_form = this.parse_form(formeditor,fields);
            //alert(parse_form);
            //document.saveform.action="index/preview.html";
            //document.saveform.submit(); //提交表单    
            //$("#saveform").attr("target","_blank");
            //$("#saveform").attr("action","index/preview.html");
            //$("#saveform").submit();     
            //window.location.href="index/preview.html";//本页面跳转
            
        } else {
            alert('表单内容不能为空！');
            return false;
        }
    }
};

/*
$('#tools_iconv').grumble({
    text: '新功能', 
    angle: 340, 
    distance: 10, 
    showAfter: 100
    //,hideAfter: 1000
});*/

/*追加内容*/
function setContent(isAppendTo) {
    //var arr = [];
    //arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
    var html=' <div class="col-lg-12 col-md-12 col-sm-12" style="border:1px solid red;">';
        	html+='<div class="table-responsive">';
        	html+='<table class="eiac-listTable">';
        	html+='<tbody>';
        	//html+='';
        	html+='</tbody>';
        	html+='</table>';
        	html+='</div>';
        	html+='</div>';
    console.log(html);
    leipiEditor.setContent('<input class="g_input" style="width:200px;border:1px solid red;"/>',isAppendTo);
    
    //leipiEditor.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
    //leipiEditor.getEditor('editor').setContent('<input class="g_input" style="width:200px;border:1px solid red;"/>', isAppendTo);
    //alert(arr.join("\n"));
}

function insertHtml(num) {
	var value="";
	if(num=="1"){
		value='<div class="col-lg-12 col-md-12 col-sm-12" style="padding-right: 0px; padding-left: 0px;">';
		value+='<div class="table-responsive">';
		value+='<table class="eiac-listTable" style="padding:0;margin:0;">';
		value+='<tbody>';
		value+='<tr class="firstRow" style="width:100%;">';
		value+='<td style="width:120px;"></td>';
		value+='<td style="width:840px;"></td>';
		value+='</tr>';
		value+='</tbody>';
		value+='</table>';
		value+='</div>';
		value+='</div>';
	}
	if(num=="2"){
		
		value='<div class="col-lg-12 col-md-12 col-sm-12" style="padding-right: 0px; padding-left: 0px;">';
		value+='<div class="table-responsive">';
		value+='<table class="eiac-listTable" style="padding:0;margin:0;">';
		value+='<tbody>';
		value+='<tr class="firstRow" style="width:100%;">';
		value+='<td style="width:120px;"></td>';
		value+='<td style="width:360px;"></td>';
		value+='<td style="width:120px;"></td>';
		value+='<td style="width:360px;"></td>';
		value+='</tr>';
		value+='</tbody>';
		value+='</table>';
		value+='</div>';
		value+='</div>';
	}if(num=="3"){
		value='<div class="col-lg-12 col-md-12 col-sm-12" >';
		value+='<div class="table-responsive">';
		value+='<table class="eiac-listTable" style="padding:0;margin:0;">';
		value+='<tbody>';
		value+='<tr class="firstRow" style="width:100%;">';
		value+='<td style="width:120px;"></td>';
		value+='<td style="width:200px;"></td>';
		value+='<td style="width:120px;"></td>';
		value+='<td style="width:200px;"></td>';
		value+='<td style="width:120px;"></td>';
		value+='<td style="width:200px;"></td>';
		value+='</tr>';
		value+='</tbody>';
		value+='</table>';
		value+='</div>';
		value+='</div>';
	}
	//var value = prompt('插入html代码', '');
	//<table><tr><td>123</td><td>123</td></tr></table>
	//alert(value);
    //UE.getEditor('editor').execCommand('insertHtml', value)
    // console.log(value);
    leipiEditor.execCommand('insertHtml', value);
}

function insertHtml_people(){
	var html='<input type="text" class="cont_screen_input cont_people_val" name="contract_apply_person" value="选人控件"/>';
	leipiEditor.execCommand('insertHtml', html);
}



function my_subject(name){
	var value="";
	if(name=="me"){
		
		
		value='<span class="my_subject" style="font-size:12px;color:blue;">+增加我方主体</span>';
		
	}if(name=="you"){
		value='<span class="my_subject" style="font-size:12px;color:blue;">+增加对方主体</span>';
	}
	leipiEditor.execCommand('insertHtml', value);
}

</script>

</body>
</html>